<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>博客详情</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/typo.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body >

<!--导航-->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini">
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">Blog</h2>
      <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
      <div class="right m-item item m-mobile-hide">
        <div class="ui icon inverted transparent input">
          <input type="text" placeholder="Search...">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
  <!--手机端菜单按钮-->
  <a href="#" class="ui menu toggle black icon  button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>

</nav>

<!--中间内容-->
<div id="waypoint" class="m-container-small m-padded-tb-large">
  <div class="ui container">
    <!--header头部-->
    <div class="ui top attached segment">
      <div class="ui horizontal link list">
        <div class="item">
          <img src="https://picsum.photos/id/1038/100/100?image=1038" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}">
          <div class="content">
            <a href="#" class="header" th:text="${blog.user.nickname}">陈鹏舟</a>
          </div>
        </div>
        <div class="item">
          <i class="calendar icon"></i>
          <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2022-09-01</span>
        </div>
        <div class="item">
          <i class="eye icon"></i>
          <span th:text="${blog.views}">1206</span>
        </div>
      </div>
    </div>
    <!--img图片区域-->
    <div class="ui attached segment">
      <img th:src="${blog.firstPicture}" src="https://picsum.photos/id/1038/800/400?image=1038" alt="" class="ui fluid rounded image">
    </div>
    <!--content内容-->
    <div class="ui attached segment">
      <!--原创-->
      <div class="ui right aligned basic segment">
        <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
      </div>
      <!--标签-->
      <h2 class="ui center aligned header" th:text="${blog.title}">本博客技术总结及更新</h2>
      <!--内容-->
      <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive" th:utext="${blog.content}">
        <h2 id="1技术栈"><strong>1.技术栈</strong></h2>
        <p>
          <strong>个人博客系统 SpringBoot+Mybatisplus</strong>
          <br />
          <strong>1.前端</strong>
        </p>
        <ul>
          <li>1.JS框架：JQuery</li>
          <li>2.滚动监听插件:jQueryWaypoints</li>
          <li>3.UI框架：<a href="https://semantic-ui.com/" target="_blank">semantic-ui</a>,<a href="https://layuion.com/docs/" target="_blank">Layui</a></li>
          <li>4.Markdown编辑器:<a href="https://pandao.github.io/editor.md/" target="_blank">editor.md</a></li>
          <li>5.动画样式:<a href="https://animate.style/" target="_blank">animate</a></li>
          <li>6.文章目录:<a href="https://tscanlin.github.io/tocbot/" target="_blank">tocbot</a></li>
          <li>7.代码高亮:<a href="https://prismjs.com/" target="_blank">prismjs</a></li>
          <li>8.音乐盒子:<a href="https://aplayer.js.org/#/" target="_blank">aplayer</a></li>
        </ul>
        <p><strong>2.后端</strong></p>
        <ul>
          <li>1.核心框架:SpringBoot 2.7.0+MybatisPlus</li>
          <li>2.数据库:mysql、redis</li>
          <li>3.项目构建:jdk1.8、maven 3</li>
          <li>4.模板引擎:thymeleaf</li>
          <li>5.分页插件:PageHelper</li>
          <li>6.登录加密:MD5</li>
          <li>7.开发工具:IDEA</li>
          <li>8.运行环境:腾讯云 Centos7 轻量应用服务器2核2G</li>
        </ul>
        <h2 id="2博客简介"><strong>2.博客简介</strong></h2>
        <p>
          <em>因为是个人博客,不需要做用户权限管理,就只有管理员用户,<strong>关于我</strong>和<strong>友链</strong>复用了文章详情页</em>
          <br />
          <strong>博客主页功能</strong>
        </p>
        <ul>
          <li>1.查看文章信息：文章列表、文章标题、文章内容、发布时间、访问量以及评论等信息</li>
          <li>2.查看标签文章：标签列表、标签文章信息</li>
          <li>3.查看归档：按照文章时间发布顺序查看文章</li>
          <li>4.搜索文章：导航栏右边搜索框根据关键字搜索</li>
          <li>5.音乐播放：上一曲、下一曲、音量控制、播放顺序控制、查看歌词等</li>
          <li>6.评论：评论并回复</li>
          <li>7.查看友链：查看并访问博主在友链页面添加的友链连接</li>
        </ul>
        <p><strong>后台管理</strong></p>
        <ul>
          <li>1.文章管理:查询文章列表、新增文章、编辑文章、删除文章、搜索文章</li>
          <li>2.标签管理:查询标签列表、新增标签、删除标签</li>
          <li>3.评论管理:查询文章评论列表、删除评论</li>
        </ul>
        <h2 id="3数据库设计"><strong>3.数据库设计</strong></h2>
        <p>
          客详情表：t_blog
          <br />
          标签表：t_tag
          <br />
          用户数据表：t_user
          <br />
          评论表：t_comment
          <br />
          博客标签关联表:t_blog_tag_relation
        </p>
      </div>

      <!--标签-->
      <div class="m-padded-lr-responsive m-margin-top">
        <div class="ui basic teal left pointing label" th:each="tag:${blog.tags}" th:text="${tag.name}">方法论</div>
      </div>

      <!--赞赏-->
      <div th:if="${blog.appreciation}">
        <div class="ui center aligned basic segment">
          <button id="payButton" class="ui orange basic circular button">赞赏</button>
        </div>
        <div class="ui payQR popup flowing transition hidden">
          <div class="ui orange basic label">
            <div class="ui image">
              <img src="../static/image/微信.jpg" th:src="@{/image/微信.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
            </div>
            <div class="ui image">
              <img src="../static/image/微信.jpg" th:src="@{/image/微信.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--blog message博客信息-->
    <div class="ui attached positive message" th:if="${blog.shareStatement}">
      <div class="ui middle aligned grid">
        <div class="eleven wide column">
          <ui class="list">
            <li>作者：<span th:text="${blog.user.nickname}">陈鹏舟</span><a href="#" th:href="@{/about}" target="_blank">（联系作者）</a></li>
            <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2022-09-01 09:08</span></li>
            <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
            <li>公众号转载：请在文末添加作者公众号二维码</li>
          </ui>
        </div>
        <div class="five wide column">
          <img src="../static/image/微信.jpg" th:src="@{/image/微信.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 110px">
        </div>
      </div>
    </div>
    <!--comment留言区域-->
    <div class="ui bottom attached segment" th:if="${blog.commentabled}">
      <!--留言区域列表-->
      <div id="comment-container" class="ui teal segment">
        <div th:fragment="commentList">
          <div class="ui threaded comments" style="max-width: 100%;">
            <h3 class="ui dividing header">评论</h3>
            <div class="comment" th:each="comment : ${comments}">
              <!--父级评论-->
              <a class="avatar">
                <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}">
              </a>
              <div class="content">
                <a class="author">
                  <span th:text="${comment.nickname}">Matt</span>
                  <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主</div>
                </a>
                <div class="metadata">
                  <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                </div>
                <div class="text" th:text="${comment.content}">
                  How artistic!
                </div>
                <div class="actions">
                  <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                </div>
              </div>
              <!--子级评论-->
              <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                <div class="comment" th:each="reply : ${comment.replyComments}">
                  <a class="avatar">
                    <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}">
                  </a>
                  <div class="content">
                    <a class="author" >
                      <span th:text="${reply.nickname}">小红</span>
                      <div class="ui mini teal basic left pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div>
                      &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>
                    </a>
                    <div class="metadata">
                      <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                    </div>
                    <div class="text" th:text="${reply.content}">
                      How artistic!
                    </div>
                    <div class="actions">
                      <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--留言区域-->
      <div id="comment-form" class="ui form">
        <input type="hidden" name="blog.id" th:value="${blog.id}">
        <input type="hidden" name="parentComment.id" value="-1">
        <div class="field">
          <textarea name="content" placeholder="请输入评论信息..."></textarea>
        </div>
        <div class="fields">
          <div class="field m-mobile-wide m-margin-bottom-small">
            <div class="ui left icon input">
              <i class="user icon"></i>
              <input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}">
            </div>
          </div>
          <div class="field m-mobile-wide m-margin-bottom-small">
            <div class="ui left icon input">
              <i class="mail icon"></i>
              <input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}">
            </div>
          </div>
          <div class="field  m-margin-bottom-small m-mobile-wide">
            <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
  <ol class="js-toc">

  </ol>
</div>

<div id="qrcode" class="ui wechat-qr flowing popup transition hidden "style="width: 130px !important;">

</div>
<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <div class="ui center aligned container">
    <div class="ui inverted divided grid">
      <div class="three wide column">
        <div class="ui inverted link list">
          <div class="item">
            <img src="../static/image/微信.jpg" class="ui rounder image" alt="" style="width: 110px">
          </div>
        </div>
      </div>
      <div class="three wide column" >
        <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
        <div id="newblog-container">
          <div class="ui inverted link list" th:fragment="newblogList">
            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">用户故事（User Story）</a>
            <!--/*-->
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <!--*/-->
          </div>
        </div>
      </div>
      <div class="four wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
        <div class="ui inverted link list">
          <a href="#" class="item">Email:1810393156@qq.com</a>
          <a href="#" class="item">QQ:1810393156</a>
        </div>
      </div>
      <div class="five wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">个人介绍</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini">河南中医药大学，考研女一枚</p>
      </div>
    </div>
    <div class="ui inverted section divider"></div>  <!-分割线->
    <p class="m-text-thin m-text-spaced m-opacity-mini">栀子比众木 人间诚未多</p>
  </div>

</footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<!--/*/</th:block>/*/-->

<!--手机端菜单按钮显示菜单事件-->
<script>
  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');
  });

  $('#payButton').popup({
    popup:$('.payQR.popup'),
    on:'click',
    position:'bottom center'
  });


  $('.ui.form').form({
    fields:{
      content:{
        identifier:'content',
        rules:[{
          type:'empty',
          prompt:'请输入评论内容'
        }]
      },
      nickname:{
        identifier:'nickname',
        rules:[{
          type:'empty',
          prompt:'请输入昵称'
        }]
      },
      email:{
        identifier:'email',
        rules:[{
          type:'empty',
          prompt:'请输入邮箱地址'
        }]
      }
    }
  });


  $(function () {
    $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"[[@{/comments/{id}(id=${blog.id})}]]");
  });

  $('#commentpost-btn').click(function () {
    var boo = $('.ui.form').form('validate form');
    if (boo) {
      console.log('校验成功');
      postData();
    } else {
      console.log('校验失败');
    }
  });

  function postData() {
    $("#comment-container").load(/*[[@{/comments}]]*/"/comments",{
      "parentComment.id" : $("[name='parentComment.id']").val(),
      "blog.id" : $("[name='blog.id']").val(),
      "nickname": $("[name='nickname']").val(),
      "email"   : $("[name='email']").val(),
      "content" : $("[name='content']").val()
    },function (responseTxt, statusTxt, xhr) {
      //$(window).scrollTo($('#comment-container'),500);
      clearContent();
    });
  }

  function clearContent() {
    $("[name='content']").val('');
    $("[name='parentComment.id']").val(-1);
    $("[name='content']").attr("placeholder", "请输入评论信息...");
  }


  function reply(obj) {
    var commentId = $(obj).data('commentid');
    var commentNickname = $(obj).data('commentnickname');
    $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
    $("[name='parentComment.id']").val(commentId);
    $(window).scrollTo($('#comment-form'),500);
  }
</script>


</body>
</html>